﻿
@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_AdminLayout.cshtml";
}

<style>
    .pagination > li > a, .pagination > li > span {
        cursor: pointer;
    }


    .redspan {
    color:red;
    margin-right: 5px;
    }
    .isfinal {
     line-height:35px;
    }
    .isfinalcolor {
       color:#33cabb;
    }
</style>

<!--页面主要内容-->
<main class="lyear-layout-content">

    <div class="container-fluid">

        <div class="row">
            <div class="col-lg-12">
                <div class="card">
                    <div class="card-toolbar clearfix">                  
                        <div class="toolbar-btn-action">
                            <a class="btn btn-primary m-r-5" data-toggle="modal" href="#modelusers"><i class="mdi mdi-plus"></i> 新增</a>
                            @*<a class="btn btn-success m-r-5" href="#!"><i class="mdi mdi-check"></i> 启用</a>
            <a class="btn btn-warning m-r-5" href="#!"><i class="mdi mdi-block-helper"></i> 禁用</a>
        <a class="btn btn-danger" href="#!"><i class="mdi mdi-window-close"></i> 删除</a>*@

                            <div class="col-lg-6">
                                <div class="input-group">
                                    <input type="text" class="form-control" id="keyword" name="keyword" placeholder="请输入姓名或者手机号...">
                                    <span class="input-group-btn">
                                        <button class="btn btn-default" type="button" onclick="search()">搜索</button>
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card-body">

                        <div class="table-responsive">
                            <table class="table table-bordered">
                                <thead>
                                    <tr>
                                        <th>
                                            <label class="lyear-checkbox checkbox-primary">
                                                <input type="checkbox" id="check-all"><span></span>
                                            </label>
                                        </th>
                                        <th>编号</th>
                                        <th>选手姓名</th>
                                        <th>手机号</th>
                                        <th>票码</th>
                                        <th>成绩</th>
                                        <th>是否进入决赛</th> 
                                        <th>比赛名称</th>      
                                        <th>赛区</th>                                           
                                        <th>操作</th>
                                    </tr>
                                </thead>
                                <tbody id="matchtbody"></tbody>
                            </table>
                        </div>
                        <ul class="pagination" id="page"></ul>

                    </div>
                </div>
            </div>

        </div>

    </div>

</main>
<!--End 页面主要内容-->

<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog"  id="modelusers" aria-labelledby="myLargeModalLabel">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                <h4 class="modal-title" id="myLargeModalLabel">新增用户</h4>
            </div>           
            <form class="form-horizontal" id="form1" action="/AdminUser/add" method="post">
                <div class="modal-body">
                    <input type="hidden" id="ID" name="ID" value="0">
                    <div class="form-group">
                        <label class="col-md-3 control-label" for="UserName">选手姓名</label>
                        <div class="col-md-7">
                            <input class="form-control" type="text" id="UserName" name="UserName" placeholder="请输入姓名..">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-3 control-label" for="PhoneNumber">请输入手机号</label>
                        <div class="col-md-7">
                            <input class="form-control" type="text" id="PhoneNumber" name="PhoneNumber" placeholder="请输入手机号..">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-3 control-label" for="TicketCode">票码</label>
                        <div class="col-md-7">
                            <input class="form-control" type="text" id="TicketCode" name="TicketCode" placeholder="票码..">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-3 control-label" for="Grades">成绩</label>
                        <div class="col-md-7">
                            <input class="form-control" type="text" id="Grades" name="Grades" placeholder="成绩..">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-3 control-label" for="IsFinal">是否进入决赛</label>
                        <div class="radio col-md-7">
                            <label class="isfinalcolor">非决赛</label>
                            <label class="lyear-switch switch-light">
                                <input name="FinalMatchN" id="FinalMatchN" type="checkbox">
                                <span></span>
                            </label>
                            <label>决赛</label>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-md-3 control-label" for="MatchID">所属比赛</label>
                        <div class="col-md-7">
                            <select class="form-control" id="MatchID" name="MatchID" size="1">
                                <option value="0">请选择</option>
                                <option value="1">选项 #1</option>
                                <option value="2">选项 #2</option>
                                <option value="3">选项 #3</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-3 control-label" for="AreaID">所属赛区</label>
                        <div class="col-md-7">
                            <select class="form-control" id="AreaID" name="AreaID" size="1">
                                <option value="0">请选择</option>
                                <option value="1">选项 #1</option>
                                <option value="2">选项 #2</option>
                                <option value="3">选项 #3</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="submit" class="btn btn-primary" onclick="sava()">点击保存</button>
                </div>
            </form>
        </div>
    </div>
</div>
<script>

    $('#modelusers').on('show.bs.modal', function () {
       
        //bindMatch();

       
    })

    $('#modelusers').on('hidden.bs.modal', function () {
        $(':input', '#form1').not(':button,:submit,:reset,#ID').val('').removeAttr('checked').removeAttr('checked');
    });




    function UserInfo() {
        this.UserName;
        this.ID;
        this.PhoneNumber;
        this.TicketCode;
        this.MatchID;
        this.FinalMatchN;
        this.Grades;

    }

    function setUserInfo(obj) {
        bindMatch();
        bindArea()
        $("#UserName").val(obj.UserName);
        $("#ID").val(obj.ID);
        $("#PhoneNumber").val(obj.PhoneNumber);
        $("#TicketCode").val(obj.TicketCode);
    
        $("#MatchID").val(obj.MatchID);
       
        bindMatch(obj.MatchID);
        bindArea(obj.AreaID)
        $("#Grades").val(obj.Grades);
        var isFinal = obj.IsFinal;
        if (isFinal == 1) {
            $("#FinalMatchN").click();
        }
       
        
    }

    $(function () {
        $("#AdminUser").addClass("active").siblings().removeClass("active");
        getPageOfData(1);  //初始化页面
       
        bindMatch();
       
    })

    function search() {
        getPageOfData(1); 
    }

    function del(id) {

        $.alert({
            title: '提示框',
            content: '<br> 确定 <strong>删除?</strong>',
            buttons: {
                confirm: {
                    text: '确认',
                    btnClass: 'btn-primary',
                    action: function () {

                        delajax(id);
                    }
                },
                cancel: {
                    text: '取消',
                    action: function () {
                        //$.alert('你点击了取消!');
                    }
                }
            }
        });



    }


    function delajax(id) {
        $.ajax({
            url: "/AdminUser/del",
            data: {id:id},
            dataType: "json",
            success: function (data) {
                if (data != null) {
                   
                    getPageOfData(1);
                }
            }
        })
    }
        function sava() {
            var options = {
                url: "/AdminUser/add",
                type: "post",
                success: function (data) {
                    if (data == "1") {
                        lightyear.notify('操作成功~', 'success', 3000, 'mdi mdi-emoticon-happy', 'top', 'center');
                        getPageOfData(1);
                        $('#modelusers').modal('hide');
                    }
                    return false
                }
            };


            $('#form1').bootstrapValidator({
                live: 'enabled', //enabled代表当表单控件内容发生变化时就触发验证，默认提交时验证，
                // disabled和submitted代表当点击提交按钮时触发验证

                feedbackIcons: {  //显示表单验证结果的图标
                    //valid: 'glyphicon glyphicon-ok',
                    //invalid: 'glyphicon glyphicon-remove',
                    //validating: 'glyphicon glyphicon-refresh'
                },
                fields: {
                    PhoneNumber: {
                        validators: {
                            notEmpty: {
                                message: '选手手机号码不能为空'
                            }
                        }
                    },
                    UserName: {
                        validators: {
                            notEmpty: {
                                message: '选手姓名不能为空'
                            }
                        }
                    },
                    Grades: {
                        validators: {
                            notEmpty: {
                                message: '成绩不能为空'
                            }
                        }
                    }
                }
            })
            $("#form1").ajaxForm(options);
        }


    function bindArea(id) {
        $.ajax({
            url: "/Area/GeSelectList",
            dataType: "json",
            success: function (data) {
                if (data != null) {
                    if (data != null && data.length > 0) {
                        var strHtml = "";
                        for (var i = 0; i < data.length; i++) {
                            var val = data[i].AreaName;
                            strHtml = strHtml + ' <option value=' + data[i].ID + '>' + val + '</option>';
                        }
                        $("#AreaID").html("");

                        $("#AreaID").html(strHtml);
                        if (id != null) {

                            $("#AreaID").val(id);
                        }
                    }

                }
            }
        })
        }

        function bindMatch(id) {          
            $.ajax({
                url: "/AdminUser/GeSelectList",
                data: {},
                dataType: "json",
                success: function (data) {
                    if (data != null) {
                        var strHtml = "";
                        for (var i = 0; i < data.length; i++) {
                            var temp = data[i];
                            strHtml = strHtml + '<option value="' + temp.ID + '">' + temp.MatchName + '</option>';
                        }
                        $('#MatchID').html("");
                        $('#MatchID').html(strHtml);
                        if (id != null) {
                           
                            $("#MatchID").val(id);
                        }
                    }
                }
            })
         
        }
        function getPageOfData(page) {

            var pageSize = 10;
            var keyword = $("#keyword").val();

            $.ajax({
                url: "/AdminUser/GetList", 
                data: {
                    pageIndex: page,  //页数
                    pageSize: pageSize,  //每页几条
                    keyword: keyword,

                },
                dataType: "json",
                //async: false,
                success: function (data) {   
                    var result = data.dt.length;
                    var dt = data.dt;
                    var strHtml = "";
                    for (var i = 0; i < dt.length; i++) {
                        var temp = dt[i];
                        var isfinal = "否";
                        if (temp.IsFinal == "1") {
                            isfinal="是"
                        }
                        strHtml = strHtml + '<tr><td><label class="lyear-checkbox checkbox-primary"><input type="checkbox" name="ids[]" value="' + temp.ID + '"><span></span></label></td>';
                        strHtml = strHtml + '<td>'+temp.ID+'</td>';
                        strHtml = strHtml + '<td>' + temp.UserName + '</td>';
                        strHtml = strHtml + '<td>' + temp.PhoneNumber + '</td>';
                        strHtml = strHtml + '<td>' + temp.TicketCode + '</td>';
                        strHtml = strHtml + '<td>' + temp.Grades + '</td>';
                        strHtml = strHtml + '<td>' + isfinal + '</td>';
                        strHtml = strHtml + '<td>' + temp.MatchName + '</td>';
                        strHtml = strHtml + '<td>' + temp.AreaName + '</td>';
                        strHtml = strHtml + '<td>';
                        strHtml = strHtml + "<div class='btn-group'><a class='btn btn-xs btn-default edit' data-toggle='modal' href='#modelusers'  onclick='setUserInfo("+JSON.stringify(temp)+")'  title='编辑' ><i class='mdi mdi-pencil'></i></a>";
                        strHtml = strHtml + '<a class="btn btn-xs btn-default" href="#!" title="删除"  onclick="del('+temp.ID+')" data-toggle="tooltip"><i class="mdi mdi-window-close"></i></a>';
                        strHtml = strHtml + '</div></td></tr>';
                    }

                    $('#matchtbody').html("");
                    $('#matchtbody').html(strHtml);


                    var totalPages = data.ToalPage;// Math.ceil(data.records / pageSize); //条数除以页数，是总页数
                    var element = $('#page');  //ul的id
                    var options = {
                        bootstrapMajorVersion: 3,
                        currentPage: page, // 当前页数
                        numberOfPages: 10, // 显示按钮的数量
                        totalPages: totalPages, // 总页数
                        itemTexts: function (type, page, current) {
                            switch (type) {
                                case "first":
                                    return "首页";
                                case "prev":
                                    return "上一页";
                                case "next":
                                    return "下一页";
                                case "last":
                                    return "末页";
                                case "page":
                                    return page;
                            }
                        },
                        // 点击事件，用于通过Ajax来刷新整个list列表
                        onPageClicked: function (event, originalEvent, type, page) {
                            getPageOfData(page);
                        }
                    };

                    element.bootstrapPaginator(options);

             

                }
            }
            );
        };

</script>

